﻿@using CallCenter.Data
@model  CallCenter.Data.Models.ScratchPadViewModel
@{
    ViewBag.Title = "ScratchHistory";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<div class="row">
    <div class="divCenter">
        <input type="button" value="AddContact" onclick="@("window.location.href='" + @Url.Action("ContactHistory", "AddContact") + "'")    ;" />
        <input type="button" value="AddCompany" onclick="@("window.location.href='" + @Url.Action("CompanyHistory", "AddCompany") + "'")    ;" />
        <input type="button" value="AddProduct" onclick="@("window.location.href='" + @Url.Action("ProductHistory", "AddProduct") + "'")    ;" />
    </div>
</div>

<div id="saveConfirm" class="collapse alert alert-success alert-dismissible" role="alert">
    <i class="pull-left fa fa-check-circle fa-2x"></i>
    <button type="button" class="close"><span aria-hidden="true">&times;</span></button>
    <span>
        Your changes have been sucessfully saved.
    </span>
</div>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4-col-offset-4">
            <div id="example">
                <div class="demo-section k-content">
                    <h4>Look Up Contact Information</h4>
                    <input id="contact" style="width: 50%;" />
                    <p class="demo-hint">
                        Start typing to find a contact. E.g. "Ann"
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4-col-offset-4">
            <div id="example">
                <div class="demo-section k-content">
                    <h4>Look Up Company</h4>
                    <input id="company" style="width: 50%;" />
                    <p class="demo-hint">
                        Start typing to find a company. E.g. "None"
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container container-table">
    <div class="row vertical-center-row">
        <div class="text-center col-md-4-col-offset-4">
            <div id="example">
                <div class="demo-section k-content">
                    <h4>Look Up Phone</h4>
                    <input id="phone" style="width: 50%;" />
                    <p class="demo-hint">
                        Start typing to find a phonenumber. E.g. "71****"
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="scratchGrid">
    
</div>

@*<input id="hdnUserName" type=hidden value=@User.Identity.Name>*@




<script id="delete-confirmation" type="text/x-kendo-template">

    <p class="delete-message">“Are you sure you want to delete the records?”</p>

    <button class="delete-confirm k-button btn btn-default">Yes</button>

    <button class="delete-cancel  k-button btn btn-default">No</button>

</script>

    <script type="text/javascript">
    function error_handler(e) {
        if (e.errors) {
            var message = "Errors:\n";
            $.each(e.errors, function (key, value) {
                if ('errors' in value) {
                    $.each(value.errors, function() {
                        message += this + "\n";
                    });
                }
            });
            alert(message);
        }
    }
    </script>
<script id="name-template" type="text/x-kendo-template">
    #: feedback #
</script>
<script type="text/javascript">
var scratchPadGrid = scratchPadGrid || {};

scratchPadGrid = function () {
    var gridInEditMode = false;
    var scratchDropDownChanged = false;
    var scratchDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "/ScratchPad/GetScratchHistory",
                type: "get",
                dataType:"json",
                cache: false
            },


            create: {
                url: "/ScratchPad/CreateScratchHistory",
                type: 'POST',
                dataType: "json",
                contentType: "application/JSON"

            },
            update: {
                url: "/ScratchPad/UpdateScratchHistory",
                type: 'POST',
                dataType: "json",
                contentType: "application/JSON"
            },
            destroy: {
                url: "/ScratchPad/DeleteScratchHistory",
                type: "POST",
                dataType: "json",
                contentType: "application/JSON"
            },
            parameterMap: function (options) {
                return kendo.stringify(options); // kendo.stringify serializes to JSON string
            }

        },

        pageSize: 10,
        schema: {
            model: {
                id: "clid",
                fields: {
                    clid: {
                        editable:false,nullable:true,
                        type:"int"
                    },
                    caller: {
                        type: "string",
                        validation: { required: true }
                    },
                    phone: {

                        type: "string"
                    },
                    loggedOwner:
                            {
                                defaultValue: "@User.Identity.Name",
                                type: "string"
                            },

                    Name: {
                        type: "string"
                    },
                    companyid: {
                        editable: true,
                        type: "int"
                    },
                    company: {
                        type: "string"
                    },
                    ContactId:{
                        type: "int"

                    },
                    productid: {
                        editable: true,
                        type: "int"
                    },
                    notes: {
                        type: "string"
                    },
                    note:{
                        type:"string"
                    },
                    feedback:
                    {
                        editable: false,
                        type: "string",
                        encoded: false

                    },
                    product: {
                        type: "string"

                    },
                    viaId: {
                        type: "int"

                    },
                    commVia:
                        {
                            type:"string",

                        },
                    inOrOut: {
                        type: "string",
                        defaultValue: "In",
                    },
                    status: {
                        type: "int"
                    },
                    statusName: {
                        type: "string",
                        defaultValue: "Open",
                    },
                    contactname: {
                        type:"string"
                    },

                    visibleToOthers: {
                type: "boolean",
                defaultValue: false,
                filterable: {
                    messages: {
                        isTrue: "Active", // sets the text for "isTrue" radio button
                        isFalse: "Inactive",
                    }
                }
            },
            updateDate:
            {
                type: "date"

            },


            error: function (a) {
                $('#scratchGrid').data("kendoGrid").cancelChanges();
            },

        }
    }
    }
});


var company = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/ScratchPad/GetJustCompanyName/",
            type: "get",
            contentType: "application/json",
            dataType: "json"
        }
    }
});

var products = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/ScratchPad/GetAllProducts/",
            type: "get",
            contentType: "application/json",
            dataType: "json"
        }

    },
    requestEnd: function (a, b) {

    }
});
var contactedVia = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/ScratchPad/GetAllCommunicationMedium/",
            type: "get",
            contentType: "application/json",
            dataType: "json"
        }
    },
    requestEnd: function (a, b) {

    }
});
var status = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/ScratchPad/GetStatus/",
            type: "get",
            contentType: "application/json",
            dataType: "json"
        }
    }
});


var contactDetails = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/ScratchPad/GetContactDetail/",
            type: "get",
            contentType: "application/json",
            dataType: "json"
        }
    },
    requestEnd: function (a, b) {

    }

});
var callerDetails = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/ScratchPad/GetCallerDetail/",
            type: "get",
            contentType: "application/json",
            dataType: "json"
        }
    }
});
var phoneDetails = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/ScratchPad/GetPhoneNumbers/",
            type: "get",
            contentType: "application/json",
            dataType: "json"
        }
    }
});
var involuedEmployees = new kendo.data.DataSource({
    transport: {
        read: function (options) {
            $.ajax({
                type: "GET",

                url: "../EmployeeGrid/GetEmployees",
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (data) {
                    options.success(data);
                }
            });
        }
    }
});

return {
    scratchDataSource: scratchDataSource,
    company:company,
    products:products,
    contactedVia:contactedVia,
    status: status,
    callerDetails: callerDetails,
    contactDetails: contactDetails,
    phoneDetails: phoneDetails,
    gridInEditMode: gridInEditMode,
    involuedEmployees:involuedEmployees,
    scratchDropDownChanged: scratchDropDownChanged
}
}();

$(function () {

    $(window).on("beforeunload", function () {
        if (scratchPadGrid.gridInEditMode) {
            return "Are you sure you want to discard all your changes."
        }

    });


    function dateTimeEditor(container, options) {
        $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '" />')
        .appendTo(container)
        .kendoDateTimePicker({});
    }


    $("#scratchGrid").kendoGrid({
        dataSource: scratchPadGrid.scratchDataSource,
        scrollable: true,
        height: "250px",
        toolbar: [{ name: "create", text: "New Call Log" }, "excel"], //, "save", "cancel"],
        excel: {
            allPages: true,
            fileName: "NewCallLogExport.xlsx"
        },
        pageable: true,
        height: 500,
        columns: [
     { field: "loggedOwner", title: "Created User", filterable: true, width: "10em" },
      { field: "caller", title: "Caller *", filterable: true, editor: callerAutoCompleteEditor,width:"8em" },
      { field: "phone", title: "Phone",editor:phoneAutoCompleteEditor, width: "8em" },
      { field: "Name", title: "Contact", width: "8em", editor: contactAutoCompleteEditor },
      { field: "company", title: "Company", editor: companyDropDownEditor, width: "8em" },
      { field: "product", title: "Products", editor: productDropDownEditor, sortable: true, width: "8em" },
       { field: "contactname", title: "Employees ", editor: invlouedEmployeeDropDownEditor, width: "10em" },

      { field: "commVia", title: "Contacted via", editor: contactedviaDropDownEditor, width: "8em" },
      { field: "inOrOut", title: "Incoming Or Outgoing ", editor: incomingOrOutgoingDropDownEditor, width: "8em" },
      { field: "statusName", title: "Status", editor: statusDropDownEditor, width: "8em" },
      {
          field: "feedback",
          title: "FeedBack",
          width: "200px",
          encoded: false
      },
        {
            field: "note",
            title: "Notes",
            width: "200px",
            hidden:true,
            attributes: {
                style: 'white-space: nowrap '
            },
         
            sortable: true,


            editor: function (container, options) {
                $('<textarea data-bind="value: ' + options.field + '" cols="20" rows="10"></textarea>').appendTo(container);
            }
        },
    {
        field: "updateDate", title: "UpdateDate*", filterable: false, format: "{0:MM/dd/yyyy HH:mm tt}",
        editor: dateTimeEditor, width: "8em" ,
        filterable: {
            ui: "datetimepicker"
        }
    },

   

       {
           field: "visibleToOthers", title: "VisibleToOthers*", template: '<input type="checkbox" #=visibleToOthers ? \'checked="checked"\' : "" # class="chkbx" onclick="return false;" />',
           filterable: {
               messages: {
                   isTrue: "Active", // sets the text for "isTrue" radio button
                   isFalse: "Inactive",
               }
           },
           width: "10em"
       },

      {
          title: "&nbsp;",
          width: "12em",
          //command: ["edit", "destroy"]
          command: [

              "edit",
              {
                  name: "Delete",


                  click: function (e) {

                      var tr = $(e.target).closest("tr"); //get the row for deletion
                      var dataItem = this.dataItem(tr); //get the row data so it can be referred later
                      ////see what is coming in dataItem
                      //if (dataItem.QuestionAnswers.length > 0) {
                      //    $("#delValidation").addClass('in')
                      //}
                      //else {

                      deleteTopicConfirmation(e, this);
                      // }
                      return false;
                  }
              }
          ]
      }
        ],

        filterable: {
            extra: false,
            operators: {
                string: {
                    eq: "Is equal to",
                    neq: "Is not equal to",
                    contains:"Contains"
                }
            }
        },

        editable: "popup",
        sortable: {
            mode: "single",
            allowUnsort: false
        },

        cancel: function () {
            scratchPadGrid.gridInEditMode = false;
        },


        excelExport: function (e) {
            for (var i = 0; i < e.workbook.sheets[0].columns.length; i++) {
                e.workbook.sheets[0].columns[i].autoWidth = true;
            }
        },


    });




    $("#scratchGrid").kendoTooltip({
        filter: "td:nth-child(11)", //this filter selects the second column's cells
        position: "left",
        content: function (e) {
            var target = e.target;
            return $(target).text();

        }
    }).data("kendoTooltip");





    scratchPadGrid.scratchDataSource.bind("requestEnd", showSuccessMessage);




    function showSuccessMessage(e) {
        if (e.type === "update" || e.type === "create") {
            scratchPadGrid.gridInEditMode = false;
            $("#saveConfirm").addClass('in');
            e.sender.read();
        }
    }


    $(".close").click(function () {
        $(this).parent().removeClass('in');
    });


    function deleteTopicConfirmation(e, widget) {
        var grid = $('#scratchGrid').data("kendoGrid");
        deleteConfirmation(e, widget, grid);
    }

    function deleteConfirmation(e, widget, grid) {

        var currentRow = $(e.target).closest("tr"); //get the row for deletion

        var currentRowData = widget.dataItem(currentRow); //get the row data so it can be  referred later

        var kendoWindow = $("<div />").kendoWindow({

            title: "Confirmation",
            resizable: true,
            modal: true,
            width: "400px"
        });

        kendoWindow.data("kendoWindow")

            .content($("#delete-confirmation").html())

            .center().open();

        kendoWindow

            .find(".delete-confirm,.delete-cancel")
            .click(function () {
                if ($(this).hasClass("delete-confirm")) {

                    grid.dataSource.remove(currentRowData);

                    grid.dataSource.sync();

                }

                $(this).closest("[data-role=window]").kendoWindow("close");

            });

    }

    function companyDropDownEditor(container, options) {
        console.log(options);
        $('<input id="CompanyValue" data-text-field="cpName" data-value-field="cpName" data-bind="value:' + options.field + '" />').appendTo(container).kendoDropDownList({
            autoBind: false,
            dataValueField: "cpName",
            dataTextField: "cpName",
            dataSource: scratchPadGrid.company,

        });
    }
    function productDropDownEditor(container, options) {

        $('<input id="ProductValue" data-text-field="product" data-value-field="product" data-bind="value:' + options.field + '" />').appendTo(container).kendoDropDownList({
            autoBind: false,
            dataValueField: "product",
            dataTextField: "product",
            dataSource: scratchPadGrid.products
        });
    }
    function statusDropDownEditor(container, options) {

        $('<input id="StatusValue" data-text-field="statusName" data-value-field="statusName" data-bind="value:' + options.field + '" />').appendTo(container).kendoDropDownList({
            autoBind: false,
            dataValueField: "statusName",
            dataTextField: "statusName",
            dataSource: scratchPadGrid.status

        });
    }
    function contactedviaDropDownEditor(container, options) {

        $('<input id="ContactedViaValue" data-text-field="commVia" data-value-field="commVia" data-bind="value:' + options.field + '" />').appendTo(container).kendoDropDownList({
            autoBind: false,
            dataValueField: "commVia",
            dataTextField: "commVia",
            dataSource:
                scratchPadGrid.contactedVia

        });
    }

    function incomingOrOutgoingDropDownEditor(container,options)
    {
        $('<input id="InOrOutValue" data-text-field="dataText" data-value-field="dataText" data-bind="value:' + options.field + '" />').appendTo(container).kendoDropDownList({
            autoBind: false,
            dataSource: { data: [{ dataText: "In", dataValue: "1",selected : true }, { dataText: "Out", dataValue: "2" }] }

        });
    }

    function callerAutoCompleteEditor(container, options) {
        $('<input required="required" name="code" data-text-field="callercompany" data-value-field="caller" data-bind="value:' + options.field + '" />')
            .appendTo(container)
            .kendoAutoComplete({
                dataValueField: "callercompany",
                dataTextField: "callercompany",
                suggest: true,
                placeHolder: "Enter Caller Name here",
                filter: "contains",
                index: 1,
                minLength: 1,
                dataSource: scratchPadGrid.callerDetails
            });

        $('<span class="k-invalid-msg" data-for="code"></span>').appendTo(container);
    }
    function phoneAutoCompleteEditor(container, options) {
        $('<input data-text-field="phone" data-value-field="phone" data-bind="value:' + options.field + '" />')
            .appendTo(container)
            .kendoAutoComplete({
                dataValueField: "phone",
                dataTextField: "phone",
                suggest: true,
                placeHolder: "Enter Phone Number",
                filter: "contains",
                index: 1,
                minLength: 1,
                dataSource: scratchPadGrid.phoneDetails
            });
    }
    function invlouedEmployeeDropDownEditor(container, options)
    {
        $('<input id="StatusValue" data-text-field="contactname" data-value-field="contactname" data-bind="value:' + options.field + '" />').appendTo(container).kendoDropDownList({
            autoBind: false,

            dataSource: scratchPadGrid.involuedEmployees

        });
    }
    function contactAutoCompleteEditor(container, options) {
        $('<input data-text-field="name" data-value-field="ContactId" data-bind="value:' + options.field + '" />')
        .appendTo(container)
        .kendoAutoComplete({
            //dataValueField: "ContactId",
            //dataTextField: "name",
            suggest: true,
            placeHolder: "Enter Contact Name",
            filter: "contains",
            //   index: 1,
            minLength: 1,
            dataSource: scratchPadGrid.contactDetails
        });
    }

});


    </script>
    @*<script type="text/javascript" src="~/Scripts/CallCenter/ScratchPadGrid.js"></script>*@
<script type="text/javascript" src="~/Scripts/CallCenter/ScratchPadAutoComplete.js"></script>
    <style>
        .dropdown-header {
            border-width: 0 0 2px 0;
            text-transform: uppercase;
        }

            .dropdown-header > span {
                display: inline-block;
                padding: 10px;
            }

                .dropdown-header > span:first-child {
                    width: 50px;
                }

        #customers-list .k-item {
            line-height: 1em;
            min-width: 300px;
        }

        /* Material Theme padding adjustment*/

        .k-material #customers-list .k-item,
        .k-material #customers-list .k-item.k-state-hover,
        .k-materialblack #customers-list .k-item,
        .k-materialblack #customers-list .k-item.k-state-hover {
            padding-left: 5px;
            border-left: 0;
        }

        #customers-list .k-item > span {
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            display: inline-block;
            vertical-align: top;
            margin: 20px 10px 10px 5px;
        }

            #customers-list .k-item > span:first-child {
                -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                margin: 10px;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                background-size: 100%;
                background-repeat: no-repeat;
            }

        #customers-list h3 {
            font-size: 1.2em;
            font-weight: normal;
            margin: 0 0 1px 0;
            padding: 0;
        }

        #customers-list p {
            margin: 0;
            padding: 0;
            font-size: .8em;
        }
    </style>



